<template>
    <el-dialog v-model="dialogFormVisible"
     @close="close"
    :title="title">
        <el-form 
        ref="dialogForm"
        :model="dialogFormData">
        <el-form-item>
            <slot name="upload"></slot>
        </el-form-item>
            <el-form-item 
            v-for="(v,k) in dialogFormData" :key="k"
            :label="v.label" 
            :label-width="formLabelWidth"
            :prop="(k + '.value')"
            :rules="{
                required:true,
                trigger:'blur',
                message:v.label + '不能为空'
            }">
                <el-input v-model="v.value" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm(dialogForm)" type="primary">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import {ref,watchEffect,toRefs} from 'vue'
// 想法：
// 1.根据传入的数据，自动创建出form表单元素，现在默认使用input
// 2.表单需要具备能够校验属性的功能
// 3.表单通过和不通过,可以回调对应的方法
// 4.控制显示隐藏的属性
// 5.控制labelWidth的属性
// 声明props

// dialog使用说明
// 属性：
// 1.visible:Boolean
// 2.dialogFormData:Object 表单的数据 {name:{lable:'item的描述',value:'对应的值'}}
// 3.formLableWidth:String lable的宽度
// 4.title:String dialog的标题

// 事件：
// vilidateSuccess 点击确定按钮，表单校验通过之后触发，回传一个form实例引用
// dialogCancel 点击取消按钮 触发的事件
// closed dialog被关闭的时候触发的时间 

    let props = defineProps({
        // dialog标题
        title:{
            type:String,
            default(){
                return '增加学员信息'
            }
        },
        // 控制表单显示隐藏的
        visible:{
            type:Boolean,
            default(){
                return false
            }
        },
        // 弹窗表单中的数据来源
        dialogFormData:{
            type:Object,
            default(){
                return {}
            }
        },
        // 
        formLabelWidth:{
            type:String,
            default(){
                return '140px'
            }
        }

    })

    // 声明表单校验通过之后的回调
    let emits = defineEmits(['validateSuccess','dialogCancel','closed'])

    // dialogFormVisible的初始值，定义为传递下来的初始值
    // console.log(props.visible)
    let dialogFormVisible = ref(false)

    // 使用watchEffect侦听visible props的变化
    let {visible} = toRefs(props)
    // 实时侦听visible props的变化，控制dialog的显示或隐藏
    watchEffect(()=>{
        // console.log(visible.value)
        dialogFormVisible.value = visible.value
    })


    // 声明取消和确定的方法

    // 点击取消
    let cancel = () => {
        emits('dialogCancel')
    }

    // 点击确定
    // 声明一个ref引用dialog的结构
    let dialogForm = ref()
    let confirm = (form) => {
        form.validate(valid=>{
            if(valid){
                // 表单校验通过
                emits('validateSuccess',dialogForm)
            }else{
                // 表单校验不通过
            }
        })
    }

    // dialog被关闭的时候触发的方法
    let close = () => {
        emits('closed')
    }

</script>